:root {
	--primary: #3A7EF0;
	--input-w-h: 20px;
	--bg-gray: #f0f2f5;
	--bg-white: white;
	--input-radius: 4px;
	--color-black: black;
	--ripple-color: 77, 171, 247;
	--ripple-opacity: 0.4;
	--ripple-duration: 0.6s;
	--ripple-scale: 2.5;
	--ripple-timing: cubic-bezier(0.4, 0, 0.2, 1);
	--com-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--ripple-start: rgba(255, 255, 255, 0.8);
	--ripple-end: rgba(255, 255, 255, 0);
	--switch-tab-radius: 50px;

	--toggle-width: 50px;
	--toggle-height: 24px;
	--toggle-knob-size: 16px;
	--toggle-knob-offset: 4px;
	--radius: 12px;
}

/* 核心开关组件 */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: var(--toggle-width);
	height: var(--toggle-height);
}

/* 隐藏原生checkbox */
.toggle-switch .toggle-input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

/* 滑块轨道 */
.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--bg-gray);
	transition: var(--ripple-duration);
	border-radius: var(--toggle-height);
}

/* 滑块按钮 */
.toggle-slider:before {
	position: absolute;
	content: "";
	height: var(--toggle-knob-size);
	width: var(--toggle-knob-size);
	left: var(--toggle-knob-offset);
	bottom: calc((var(--toggle-height) - var(--toggle-knob-size)) / 2);
	background-color: white;
	transition: var(--ripple-duration);
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 选中状态样式 */
.toggle-input:checked+.toggle-slider {
	background-color: var(--primary);
}

.toggle-input:checked+.toggle-slider:before {
	transform: translateX(calc(var(--toggle-width) - var(--toggle-knob-size) - 2*var(--toggle-knob-offset)));
}

/* 禁用状态 */
.toggle-input:disabled+.toggle-slider {
	opacity: 0.5;
	cursor: not-allowed;
}

/* 聚焦状态 */
/* .toggle-input:focus+.toggle-slider {
	box-shadow: 0 0 1px var(--primary);
} */

.checkbox-group {
	display: flex;
	gap: var(--gap);
	font-size: var(--font-size-primary);
}

.checkbox-column {
	flex-direction: column;
}

.checkbox-item {
	display: inline-flex;
	align-items: center;
	user-select: none;
	position: relative;
	cursor: pointer;
}

.checkbox-input {
	display: none;
	opacity: 0;
	width: 0;
	height: 0;
}

.checkbox-input-custom {
	position: relative;
	width: var(--input-w-h);
	height: var(--input-w-h);
	background: var(--bg-white);
	margin-right: calc(var(--gap) / 2);
	border: 2px solid var(--bg-gray);
	transition: all 0.3s ease;
	flex-shrink: 0;
	will-change: transform, opacity;
	backface-visibility: hidden;
}

.checkbox-input[type="radio"]+ .checkbox-input-custom {
	border-radius: 50%;
}

.checkbox-input[type="checkbox"]+ .checkbox-input-custom {
	border-radius: var(--input-radius);
}

.checkbox-content {
	font-family: 'Segoe UI', system-ui, sans-serif;
	color: var(--color-black);
}

.checkbox-input:checked+.checkbox-input-custom {
	border-color: var(--primary);
}

.checkbox-input:checked+.checkbox-input-custom::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(var(--input-w-h) * 0.6);
	height: calc(var(--input-w-h) * 0.6);
	background: var(--primary);
}

.checkbox-input:checked+.checkbox-input-custom::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(var(--input-w-h) * 0.6);
	height: calc(var(--input-w-h) * 0.6);
	background: rgba(var(--ripple-color), var(--ripple-opacity));
	transform: translate(-50%, -50%) scale(0);
	animation:
		ripple-scale var(--ripple-duration) var(--ripple-timing),
		ripple-fade var(--ripple-duration) var(--ripple-timing);
	z-index: -1;
	pointer-events: none;

}

.checkbox-input[type="radio"]:checked+.checkbox-input-custom::before {
	border-radius: 50%;
}

/* .checkbox-input[type="radio"]:checked+.checkbox-input-custom::after {
	border-radius: 50%;
}
 */
.checkbox-input[type="checkbox"]:checked+.checkbox-input-custom::before {
	border-radius: calc(var(--input-radius) / 2);
}

.checkbox-input[type="checkbox"]:checked+.checkbox-input-custom::after {
	border-radius: calc(var(--input-radius) / 2);
}

.checkbox-input:checked~.checkbox-content {
	color: var(--primary);
}

@keyframes ripple-scale {
	to {
		transform: translate(-50%, -50%) scale(var(--ripple-scale));
	}
}

@keyframes ripple-fade {
	to {
		opacity: 0;
	}
}

/* 水波纹动画定义 */
@keyframes ripple {
	0% {
		transform: scale(0);
		opacity: 1;
	}

	100% {
		transform: scale(2);
		opacity: 0;
	}
}

/* 兼容性处理 */
@-webkit-keyframes ripple {
	0% {
		-webkit-transform: scale(0);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(2);
		opacity: 0;
	}
}

.switch-tab {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: var(--switch-tab-radius);
	padding: 0.5rem;
	font-size: var(--font-size-primary);
	background: var(--white);
	box-shadow: var(--com-shadow);
}

.switch-tab-item {
	flex: 1;
	display: flex;
	align-items: center;
	position: relative;
	will-change: transform, opacity;
	transform: translate3d(0, 0, 0);
}

.switch-tab-item::before,
.switch-tab-item::after {
	content: "";
	position: absolute;
	animation: ripple 0.6s ease-out;
}

.switch-tab-item::before {
	animation-delay: 0.1s;
}

.switch-tab-item::after {
	animation-delay: 0.2s;
}

.switch-tab-input {
	display: none;
	opacity: 0;
	width: 0;
	height: 0;
}

.switch-tab-label {
	flex: 1;
	padding: 0.5rem;
	color: var(--color-second);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.switch-tab-label .inner {
	position: relative;
	padding: 0.5rem;
}

.switch-tab-input:checked+.switch-tab-label {
	font-weight: 500;
	color: var(--bg-white);
	background: var(--primary);
	border-radius: var(--switch-tab-radius);
	transition: transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.radio-category-group {
	display: flex;
	flex-direction: column;
	/* gap: 10px; */
	font-size: var(--font-size-primary);
}

/* .category-input:checked +.category-item .category-input-custom {
	background: blue;
}

.category-input-custom {
	width: 3px;
	height: 100%;
	margin-right: calc(var(--gap) / 2);
} */




h2 {
	margin-top: 40px;
}
